「Day14-試試Vue3-規劃口袋餐廳的頁面」提到建立新頁面之前，建議專注於設計所需的 html 結構。這樣可以更好地思考如何渲染資料以及應該使用哪些 JavaScript 方法來實現所需的功能。隨著時間和經驗的累積，開發者將能夠更迅速地規劃頁面，並更清晰地理解類似頁面所需的功能和相應的 JavaScript 方法。這種經驗的積累有助於提高效率並更好地滿足用戶需求，使開發過程更加流暢。勉勵各位和我一樣的前端新手，試著刻意練習讓自己的程式感（找不到更貼切的詞彙，先用這個自創的吧。類似學習語言的語感）與大腦習慣這樣的思維，使自己有天能將之自然運用。

靜態畫面
下圖為理想的畫面示意圖，分為兩個部分說明。上面區塊是根據會員點擊下面各口袋餐廳清單（以下簡稱口袋清單）而產生資料內容。所以畫面示意圖會從下面區塊開始介紹。

• 下面區塊（篩選後的口袋清單）
  將前一個頁面口袋餐廳紀錄的口袋清單以卡片形式呈現，資料是用 JavaScript 進行動態渲染。與頁面口袋餐廳不同的是這邊會多一個「餐廳評論」欄位。如果要增加餐廳實際評論（以下簡稱餐廳實評），會員可以點擊所要的口袋清單卡片就可對該餐廳進行「餐廳評論」撰寫。

• 上面區塊（口袋餐廳清單）
  根據會員點擊的口袋清單卡，表單會列出其品牌受眾、品牌名稱、地址三個唯讀狀態的欄位。資料預計取自會員餐廳 API ，並由 v-for 進行資料渲染。底下的「餐廳評論」欄位可供會員紀錄實際的用餐體驗。填完提交表單後，資料會回傳到會員餐廳 API ，頁面的卡片內容也會即時更新。

為避免畫面中口袋清單卡片因各個「餐廳評論」內容長度不一影響排版美觀，專案在按鈕「查看實評」上運用 bootstrap 的摺疊功能將「餐廳評論」欄位透過點擊來進行收合。